<style scoped>

</style>
<!--  -->
<template>
  <div class="operate-repertory-list">
    <el-row>
      <el-col :span="24">
        <el-button size="small" type="primary" @click="upload" :disabled="uploadLoading">
          {{uploadLoading?'Loading...':'点击上传'}}</el-button>
        <el-button size="small" type="default" @click="addOutsideImageLink" style="margin-left:10px;">添加外链图片</el-button>
        <el-button size="small" type="success" @click="resetDataTable" style="margin-left:10px;">刷新</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top:12px;">
      <el-col :span="24">
        <el-form :inline="true" :model="where" :rules="rules" ref="repertorySearch" class="demo-form-inline" @submit.native.prevent>
          <el-form-item label="标签" style="margin-bottom:0;" prop="labelId">
            <el-select size="small" v-model="where.labelId" placeholder="选择资源的标签">
              <el-option label="全部标签" :value="-1"></el-option>
              <el-option label="未定义" :value="0"></el-option>
              <el-option v-for="item in labels" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型" style="margin-bottom:0;" prop="type">
            <el-select size="small" v-model="where.type" placeholder="选择文件的类型">
              <el-option label="所有类型" :value="-1"></el-option>
              <el-option label="图片" :value="0"></el-option>
              <el-option label="文件" :value="1"></el-option>
              <el-option label="Flash" :value="2"></el-option>
              <el-option label="音频" :value="3"></el-option>
              <el-option label="视频" :value="5"></el-option>
              <el-option label="外链图片" :value="4"></el-option>
              <el-option label="SSL文件" :value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" style="margin-bottom:0;" prop="originalFilename">
            <el-input size="small" v-model="where.originalFilename" placeholder="资源名称" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom:0;">
            <el-button size="small" type="primary" @click="onSearch('repertorySearch')">查询</el-button>
            <el-button size="small" ref="reset" @click="resetSearch('repertorySearch')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <RepertoryUpload ref="repertoryUpload" :finish="complete" />
    <AddOutsideImageLink :getLink="submitOutsideImageLink" ref="addOutsideImageLink" />
  </div>
</template>

<script>
import RepertoryUpload from '@/components/common/upload/RepertoryUpload.vue'
import AddOutsideImageLink from '@/components/main/user/repertory/dialog/AddOutsideImageLink.vue'
export default {
  props: {
    resetData: {
      type: Function
    },
    searchData: {
      type: Function
    }
  },
  created () {
    // 获取文件可以上传的后缀
    this.$post('/upload/allow-ext').then((response) => {
      // uploadLoading
      this.uploadInfos = response
      this.uploadLoading = false
    })
    // 获取所有的标签
    this.$post('/repertory/all-label').then((response) => {
      this.labels = response
    })
  },
  data () {
    return {
      uploadLoading: true,
      // 允许上传的后缀
      uploadInfos: [],
      // 所有的标签
      labels: [],
      rules: {
        originalFilename: [
          { min: 1, max: 100, message: '资源名称长度不能超过100个字符！', trigger: 'blur' }
        ]
      },
      // repertory 对应的查询条件
      where: {
        labelId: -1,
        type: -1,
        originalFilename: ''
      }
    }
  },
  methods: {
    upload () {
      if (this.uploadLoading) {
        return
      }
      // 调用子组件RepertoryUpload click() 方法
      this.$refs['repertoryUpload'].click(this.uploadInfos)
    },
    // 上传完成后
    complete () {
      this.resetSearch('repertorySearch')
      this.resetData()
    },
    resetDataTable () {
      this.resetData()
    },
    // 搜索
    onSearch (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchData(this.where)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 添加外部图片资源链接
    addOutsideImageLink () {
      this.$refs['addOutsideImageLink'].open()
    },
    submitOutsideImageLink (link) {
      this.$post('/repertory/add-outside-image-link', { link: link }).then(response => {
        if (response && response.id > 0) {
          this.resetData()
        }
      })
    },
    // 重置
    resetSearch (formName) {
      this.$refs[formName].resetFields()
      this.$nextTick(() => {
        this.onSearch(formName)
      })
    }
  },
  components: {
    RepertoryUpload,
    AddOutsideImageLink
  },
  // 挂载后将 where 传递给DataList组件中
  mounted () {
    this.searchData(this.where)
  }
}

</script>
